<!--首页身体部分组件-->
<template>
    <div>
        <van-icon name="orders-o" id="iconList" @click="jump" style="z-index: 200;"/>
        <van-popup
                v-model="show"
                position="bottom"
                :style="{ height: '100%' ,width: '100%'}"
        >
            <div class="header">
                <h3>全部频道</h3>
                <van-icon name="cross" style="float: right; margin-right: 10px; line-height: 45px;" @click="close"/>
            </div>
            <div class="channel">
                <div class="myheader">
                    <h4>我的频道 </h4>
                    <span style="float: right; margin-right: 10px; line-height: 25px; font-size: 12px;color: #409EFF"
                          v-if="sub" @click="Change">编辑</span>
                    <span style="float: right; margin-right: 10px; line-height: 25px; font-size: 12px;color: #409EFF"
                          v-else @click="success">完成</span>
                </div>
                <div>
                    <ul>
                        <li style="color: #409EFF;">推荐</li>
                        <li v-for="(item,index) in subscribeList" :key="index" @click="unSub(item)">{{item.name}}</li>
                    </ul>
                </div>
                <div class="myheader">
                    <h4>频道推荐</h4>
                    <span style="font-size: 12px; color:#999999; margin-left: 5px;">点击添加频道</span>
                </div>
                <div>
                    <ul>
                        <li v-for="(item1,index) in unsubscribe" :key="index" @click="addSubscribe(item1)">
                            {{item1.name}}
                        </li>
                    </ul>
                </div>
            </div>

        </van-popup>
        <van-tabs title-active-color="red" style="height: 300px" @click="dianji" v-model="activeName">

            <!--            推荐-->
            <van-tab title="推荐" name="推荐" class="middle">
<!--                轮播图-->
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in picshufflingFigure" :key="index">
                        <router-link :to="'/RotateDeatil?articleId='+item.articleId">
                            <img :src="item.coverImgUrl" alt="" @click="jumpDeatil">
                        </router-link>
                    </van-swipe-item>
                </van-swipe>
<!--                轮播图结束-->
                <van-notice-bar
                        left-icon="volume-o"
                        scrollable
                        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
                />
                <!-- 下拉刷新-->
                <van-loading size="20px" style="text-align: center;margin-top: 10px" v-if="placeholder">加载中...
                </van-loading>
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-else success-text="刷新成功">
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                    >
                        <van-cell v-for="(item,index) in list" :key="index">

                            <div class="middleCenter">
                                <div>
                                    <span @click="changeDetail(newlist[index])">{{newlist[index].title}}</span>
                                    <p>
                                        <span style="color: #409EFF">{{newlist[index].articleSource}}</span><span
                                            style="margin-left: 10px;font-size: 12px;color: #999">{{newlist[index].createTime}}</span>
                                    </p>
                                    <span class="toSeeDetail" @click="changeDetail(newlist[index])">查看详情>></span>
                                </div>
                                <div>
                                    <div @click="changeDetail(newlist[index])" class="picMig"
                                         :style="{'background-image': 'url('+newlist[index].coverImgUrl+')','background-repeat':'no-repeat','background-size':'100%'}"></div>
                                </div>
                            </div>
                        </van-cell>
                    </van-list>
                </van-pull-refresh>
            </van-tab>
            <!--            推荐结束-->

            <!--轮播图-->

            <!--tab循环-->
            <van-tab v-for="(item1,index) in $store.state.login.isLogin?subscribeList:newsList" :title="item1.name"
                     :key="index" class="middle"
                     :name="item1.categoryId" style="position: relative;z-index: 100">

                <!--轮播图-->
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in picshufflingFigure" :key="index">
                        <router-link :to="'/RotateDeatil?articleId='+item.articleId">
                            <img :src="item.coverImgUrl" alt="" @click="jumpDeatil">
                        </router-link>
                    </van-swipe-item>
                </van-swipe>
                <!--轮播图۞结束-->
                <van-notice-bar
                        left-icon="volume-o"
                        scrollable
                        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
                />
                <!-- 下拉刷新-->
                <van-loading size="20px" style="text-align: center;margin-top: 10px" v-if="placeholder">加载中...
                </van-loading>
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-else success-text="刷新成功">
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                    >
                        <van-cell v-for="(item,index) in list" :key="index">
                            <div class="middleCenter">
                                <div>
                                    <span @click="changeDetail(newlist[index])">{{newlist[index].title}}</span>
                                    <p>
                                        <span style="color: #409EFF">{{newlist[index].articleSource}}</span><span
                                            style="margin-left: 10px;font-size: 12px;color: #999">{{newlist[index].createTime}}</span>
                                    </p>
                                    <span class="toSeeDetail" @click="changeDetail(newlist[index])">查看详情>></span>
                                </div>
                                <div>
                                    <div @click="changeDetail(newlist[index])" class="picMig"
                                         :style="{'background-image': 'url('+newlist[index].coverImgUrl+')','background-repeat':'no-repeat','background-size':'100%'}"></div>
                                </div>
                            </div>
                        </van-cell>
                    </van-list>
                </van-pull-refresh>
                <!--                下拉刷新结束-->
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import {listNews, shufflingFigure, getSubscribe, Subscribe} from "../api/api";

    export default {
        // name: "TabPage.vue",
        data() {
            return {
                picshufflingFigure: [],
                loading: false,
                finished: false,
                refreshing: false,
                //    新闻列表详情页
                list: [],
                newlist: [],
                //占位符
                placeholder: true,
                activeName: '推荐',
                show: false,
                //订阅
                subscribeList: [],
                sub: true,
                num:2,
                newName:"推荐",
            }
        },
        methods: {
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.loading = false;
                    //    新闻列表详情

                    if (this.list.length >= 4000) {
                        this.finished = true;
                    }
                }, this.list.length==0? 50: 1000);
                if(this.list.length > 0) {
                    listNews(this.num, 10, "", "").then(res => {
                        // console.log(res)
                        // newList新闻列表页
                        for (let item of res.rows) {
                            this.newlist.push(item)
                        }
                        this.placeholder = false;
                        this.num += 1
                    })
                }
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;
                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
                setTimeout(() => {

                    this.isLoading = false;
                    this.count++;
                }, 1000);

                setTimeout(() => {
                    this.newlist.reverse()
                    this.newlist.splice(this.newlist.length - 5)
                }, 1000);


            },

            dianji(name) {
                // console.log(typeof name);
                //    新闻列表详情
                console.log(this.subscribeList.filter(item=>item.categoryId==name))
                this.newName =  this.$store.state.login.isLogin?this.subscribeList.indexOf(this.subscribeList.filter(item=>item.categoryId==name)[0]):this.newsList.indexOf(this.newsList.filter(item1=>item1.categoryId==name)[0]);
                console.log(this.newName)
                localStorage.setItem("newName", this.newName)
                this.placeholder = true
                if (name == "推荐") {
                    this.list = []

                    listNews(1, 10, "", "").then(res => {
                        // console.log(res)
                        // newList新闻列表页
                        this.placeholder = false;
                        this.newlist = res.rows || []
                    })
                } else {
                    this.list = []
                    listNews(1, 10, name, "").then(res => {
                        // console.log(res)
                        // newList新闻列表页
                        this.placeholder = false;
                        this.newlist = res.rows || []
                    })
                }
            },
            changeDetail(item) {
                // console.log(document.getElementsByClassName("middle")[0].scrollTop)
                if(this.newName == "推荐"){
                    // console.log(this.scollTop)
                    localStorage.setItem("top",document.getElementsByClassName("middle")[0].scrollTop)
                }else {

                    localStorage.setItem("top",document.getElementsByClassName("middle")[this.newName+1].scrollTop)
                }
                this.$router.push("/RotateDeatil?articleId=" + item.articleId)
            },
            jump() {
                // console.log("点击");
                if (this.$store.state.login.isLogin) {
                    this.show = true;
                } else {
                    // this.$toast("请先登录")
                    this.$dialog.confirm({
                        title: '您未处于登录状态',
                        message: '是否去登录',
                    })
                        .then(() => {
                            this.$router.push("/login")
                        })
                        .catch(() => {
                            // on cancel
                        });
                }
            },
            addSubscribe(item) {
                this.subscribeList.push(item)
            },
            Change() {
                this.sub = false;
            },
            success() {
                this.sub = true;
            },
            unSub(item) {
                if (!this.sub) {
                    this.subscribeList.splice(this.subscribeList.indexOf(item), 1);
                }
            },
            close() {
                this.show = false;
                let ids = this.subscribeList.map(item => {
                    return item.categoryId
                })
                Subscribe(ids.toString()).then(res => {
                    console.log(res);
                })
            },
            jumpDeatil(){
                localStorage.setItem("top",0)
            }
        },
        created() {
            //新闻列表分类
            this.$store.dispatch("initnewsList")

            // 轮播图
            shufflingFigure(1, 10).then(res => {
                // console.log(res)
                this.picshufflingFigure = res.rows
            })

            //    新闻列表详情
            listNews(1, 10, "", "").then(res => {
                // console.log(res)
                // newList新闻列表页
                this.newlist = res.rows || []
                this.placeholder = false;
            })
            //订阅接口
            getSubscribe().then(res => {
                this.subscribeList = res.rows || [];
            })
            localStorage.setItem("newName",this.newName)
        },
        computed: {
            newsList() {
                return this.$store.state.newsList
            },
            unsubscribe() {
                return this.newsList.filter(item => !this.subscribeList.some(item1 => item1.categoryId == item.categoryId))
            }
        },
        activated() {
            // eslint-disable-next-line no-debugger
            this.newName = localStorage.getItem("newName");
            this.scollTop = Number(localStorage.getItem("top"))
            if(this.newName == "推荐"){
                // console.log(this.scollTop)
                document.getElementsByClassName("middle")[0].scrollTo(0,this.scollTop || 0)
            }else {
                // console.log(this.newName)
                // console.log(this.scollTop)
                this.newName = Number(this.newName)
                document.getElementsByClassName("middle")[this.newName+1].scrollTo(0,this.scollTop || 0)
            }

        },
        // deactivated() {
        //     // eslint-disable-next-line no-debugger
        //     // debugger
        //
        //     this.scollTop = 200
        // }
    }
</script>
<style scoped lang="less">
    /deep/ .van-tabs__nav {
        width: 95%;
        /*overflow: hidden;*/
        /*border-right: 2px solid #eaeaea;*/
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        height: 200px;
        /*line-height: 150px;*/
        text-align: center;
        /*background-color: #39a9ed;*/

        img {
            width: 100%;
            height: 100%;
        }
    }

    .middle {
        height: calc(100vh - 135px);
        overflow: scroll;
    }

    .middleCenter {
        display: flex;
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;

        div:nth-of-type(1) {
            width: calc(100vw - 120px);
        }

        div:nth-of-type(2) {
            width: 120px;
            text-align: center;
            height: 100px;

            .picMig {
                width: 80%;
                height: 80%;
                margin: 20px auto;
                float: right;
            }
        }
    }

    .toSeeDetail {
        /*float: right;*/
        color: #409EFF;
        font-size: 12px;
    }

    /deep/ .van-cell {
        border-bottom: 1px solid #eaeaea;
    }

    /deep/ .van-cell {
        padding: 5px 16px;
    }

    /* 订阅图标*/
    #iconList {
        float: right;
        font-size: 24px;
        line-height: 44px;
    }

    /*  弹出层布局*/
    .header {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #eaeaea;
        text-align: center;

        h3 {
            display: inline-block;
        }
    }

    .channel {
        padding: 10px;

        .myheader {
            margin-top: 10px;
            height: 25px;
            line-height: 25px;
            margin-bottom: 10px;

            h4 {
                display: inline-block;
            }
        }

        ul {
            display: flex;
            /*justify-content: space-around;*/
            flex-wrap: wrap;
            align-items: center;

            li {
                width: 15%;
                font-size: 14px;
                text-align: center;
                background-color: #eaeaea;
                margin: 10px 2.5%;
                border-radius: 10px;
                padding: 5px;
            }
        }
    }
</style>